<template>
    <div class="cat">
        <div class="top">
            <icon class="el-icon-shopping-cart-full" type="error" size="100"><span>我的购物车</span> </icon>
            <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
        </div>
        <el-table :data="tableData" class="table" @selection-change="change">
            <el-table-column prop="check" label="全选" width="80" type="selection">
            </el-table-column>
            <el-table-column>
                <template slot-scope="{row}">
                    <img :src="'http://101.132.181.9/api/' + row.productImg" alt="" class="img" width="100px"
                        height="110px" @click="detailsPage(row)">
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称">
                <template slot-scope="{row}">
                    <span @click="detailsPage(row)" class="name">
                        {{ row.productName }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价">
            </el-table-column>
            <el-table-column prop="num" label="数量">
                <template slot-scope="{row}">
                    <el-input-number v-model="row.num" :min="1" :max="10" @change="changeNumber(row)"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="小计" width="100">
                <template slot-scope="{row}">
                    <span style="color: #ff6700; font-size: 20px;">{{ row.num * row.price }}元</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="{row}">
                    <el-popconfirm @confirm="delok(row)" icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？">
                        <icon class="el-icon-error" size="203" slot="reference"></icon>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="bottom">
            <div class="left">
                <span class="shoping" @click="$router.push('/goods')">继续购物</span>|
                <span style="margin-left: 20px;">共<span style="color: #ff6700;">{{ allLength }}</span>件商品，已选择 <span
                        style="color: #ff6700;">{{ checklength }}</span>件</span>
            </div>
            <div class="right">
                <div style="color: #ff6700;">合计：<span style="font-size: 25px; margin-right: 40px;">{{ allnum }}元</span>
                </div>
                <div class="jie" @click="ToSettle" style="cursor: pointer;">去结算</div>
            </div>
        </div>
    </div>
</template>
<script>
import { getcat, delcat, inputnumber } from '../api/api'
export default {
    data() {
        return {
            tableData: {},
            allLength: 0,
            checklength: 0,
            allnum: 0,
            list:[]
        }
    },
    methods: {
        ToSettle(){
            if(this.list.length>=1){
                this.$router.push({
                    path: '/ConfirmOrder',
                    query: {
                        // url的参数, 类似get请求的传参
                       list:this.list
                    },
                })
            }
        },
        async getcatlist() {
            try {
                let id = this.$store.state.id
                const { shoppingCartData } = await getcat({ user_id: id })
                this.allLength = shoppingCartData.length
                localStorage.setItem('length', this.allLength)
                this.tableData = shoppingCartData
            } catch (error) {

            }
        },
        detailsPage(row) {
            this.list=row
            // console.log(row);
            this.$router.push('/detailsPage')
            this.$store.commit('detailsPage', row.productID)
        },
        async delok(row) {
            // console.log(row);
            let id = this.$store.state.id
            await delcat({ user_id: id, product_id: row.productID })
            this.$notify({
                title: '成功',
                message: '删除商品',
                type: 'success'
            });
            this.getcatlist()
        },

        async changeNumber(row) {
            let num = row.num
            let product_id = row.productID
            let id = this.$store.state.id
            await inputnumber({ num: num, product_id: product_id, user_id: id })
            this.$notify({
                title: '成功',
                message: '修改商品数量',
                type: 'success'
            });
        },
        change(val) {
            val.forEach(item => {
                if (!item.check) {
                    item.check=true
                    // console.log(111);
                }
            })
            this.list=val
             this.checklength=val.length
            this.getnewsum()
        },
        getnewsum() {
            let num = 0;
            // console.log(132,this.tableData);
            this.tableData.find((item) => {
                    if (item.check){
                        num += item.price * item.num;
                    }else{
                        // console.log(123);
                    }
                });
          
            this.allnum = num;
        },
    },
    watch: {
        deep: true,
        handler(){

        }
    },
    computed: {

    },
    components: {},
    created() {
        this.getcatlist()
        this.getnewsum()
    },
}
</script>
<style lang="scss" scoped>
.cat {
    height: 100%;

    .top {
        line-height: 100px;
        border-bottom: 2px solid #ff6700;

        icon {
            font-size: 32px;

            span {
                padding-left: 10px;
                color: #000;
            }

            margin-right: 20px;
        }

        span {
            margin-top: 10px;
            color: #757575;
        }

    }

    .table {
        .name:hover {
            color: #ff6700;
            cursor: pointer;
        }
    }

    .bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 50px;

        .left {
            color: #757575;

            .shoping {
                margin: 0 20px;
            }

            .shoping:hover {
                color: #ff6700;
                cursor: pointer;
            }
        }

        .right {
            display: flex;

            .jie {
                width: 150px;
                text-align: center;
                background: #e0e0e0;
                color: #b0b0b0;
                font-size: 20px;

            }
        }
    }
}

.el-icon-error:hover {
    color: #ff6700;
}
</style>